import ReactECharts from 'echarts-for-react';
import { Empty } from 'antd';
import useWindowWidth from '@/hooks/event/use-window-width';
import { userActiveItem } from '@/common/types';
import { useEffect, useState } from 'react';
import React from 'react';
import { start } from 'nprogress';


interface Props {
  data: userActiveItem[];
  isdataZoom?: boolean
}

const UserActiveLine = ({ data, isdataZoom }: Props) => {
  const { isPc } = useWindowWidth();

  const [mounted, setMounted] = useState(false);

  const getLast24HoursData = (data) => {
    if (!data || data.length === 0) return [];

    // 获取当前时间
    const now = new Date();
    // 计算24小时前的时间
    const twentyFourHoursAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000);

    // 过滤出最近24小时的数据
    return data.filter(item => {
      const itemDate = new Date(item.active_hours);
      return itemDate >= twentyFourHoursAgo;
    });
  };

  console.log("getLast24HoursData2============", getLast24HoursData(data));


  useEffect(() => {
    setMounted(true);
  }, []);

  const option = {
    grid: {
      left: isPc ? '2%' : '6%', // 左边距
      right: isPc ? '2%' : '6%', // 右边距
      bottom: '5%', // 底部距离
      top: '5%', // 顶部距离
      containLabel: true, // 包含坐标轴的标签
    },
    xAxis: {
      type: 'category',
      data: data.map((item) => item.active_hours)

    },
    yAxis: {
      type: 'value'
    },
    tooltip: {
      trigger: 'axis',
      formatter: (params: any) => {
        return `${params[0].name}：${params[0].value}`
      }
    },
    dataZoom: isdataZoom ? [
      {
        show: true,  // 显示控制条（仅作为视觉提示）
        start: getLast24HoursData(data).length > 0 ? 100 - (getLast24HoursData(data).length / data.length * 100) : 0,
        // start: 70,
        end: 100,
        // 彻底禁用所有交互
        zoomLock: true,
        moveOnMouseMove: false,
        moveOnMouseWheel: false,
        preventDefaultMouseMove: true,
        // 隐藏所有可操作元素
        handleIcon: 'none',      // 隐藏拖动按钮
        handleSize: 0,           // 设置手柄大小为0
        handleStyle: {
          opacity: 0             // 完全透明手柄
        },
        // 禁用数据阴影（刷选区域）
        brushSelect: false,
        fillerColor: 'transparent',
        borderColor: 'transparent'
      }
    ] : null,
    series: [
      {
        smooth: true,
        symbolSize: 8,
        lineStyle: {
          width: 3,
          // color: '#8C69FF',
          color: '#1B6DFA',
        },
        data: data.map((item) => item.active_count),
        type: 'line',
        // itemStyle: {
        //   color: 'transparent', // 填充色透明
        //   borderColor: '#8C69FF', // 边框颜色
        //   borderWidth: 2 // 边框宽度
        // },
        // lineStyle: {
        //   color: '#8C69FF', // 线条颜色
        //   width: 3 // 线条宽度
        // },
        // symbol: 'circle', // 数据点形状
        // symbolSize: 8, // 数据点大小
      }
    ],
  };


  return (
    mounted ?
      <div
        style={{
          minHeight: isPc ? 'unset' : '250px',
          height: 'calc(100% - 20px)',
          width: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          // backgroundColor: data.length > 0 ? '#ECEFF7' : '',
        }}
      >
        {data.length > 0 ? (
          <ReactECharts option={option} style={{ height: isPc ? '100%' : '100%', width: '100%' }} />
        ) : (
          <Empty description="暂无数据" />
        )}
      </div> : <div>Loading...</div>
  )
}

export default UserActiveLine